<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QUANTUM - 未来科技，触手可及</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/three@0.157.0/build/three.min.js"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #000;
            color: #fff;
            overflow-x: hidden;
        }

        /* 玻璃态效果 */
        .glass {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .glass-dark {
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        /* 动态网格背景 */
        .grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: grid-move 20s linear infinite;
            z-index: 1;
        }

        @keyframes grid-move {
            0% { transform: translate(0, 0); }
            100% { transform: translate(50px, 50px); }
        }

        /* 扫描线效果 */
        .scanline {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8), transparent);
            animation: scan 8s linear infinite;
            z-index: 10;
            pointer-events: none;
        }

        @keyframes scan {
            0% { transform: translateY(0); }
            100% { transform: translateY(100vh); }
        }

        /* 脉冲动画 */
        .pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* 呼吸动画 */
        .breathe {
            animation: breathe 4s ease-in-out infinite;
        }

        @keyframes breathe {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        /* 故障效果 */
        .glitch {
            position: relative;
            animation: glitch-skew 1s infinite linear alternate-reverse;
        }

        .glitch::before,
        .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .glitch::before {
            animation: glitch-1 0.5s infinite linear alternate-reverse;
            color: #00ffff;
            z-index: -1;
        }

        .glitch::after {
            animation: glitch-2 0.5s infinite linear alternate-reverse;
            color: #ff00ff;
            z-index: -2;
        }

        @keyframes glitch-1 {
            0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 2px); }
            20% { clip-path: inset(92% 0 1% 0); transform: translate(2px, -2px); }
            40% { clip-path: inset(43% 0 1% 0); transform: translate(-2px, 2px); }
            60% { clip-path: inset(25% 0 58% 0); transform: translate(2px, -2px); }
            80% { clip-path: inset(54% 0 7% 0); transform: translate(-2px, 2px); }
            100% { clip-path: inset(58% 0 43% 0); transform: translate(2px, -2px); }
        }

        @keyframes glitch-2 {
            0% { clip-path: inset(25% 0 61% 0); transform: translate(2px, -2px); }
            20% { clip-path: inset(54% 0 7% 0); transform: translate(-2px, 2px); }
            40% { clip-path: inset(58% 0 43% 0); transform: translate(2px, -2px); }
            60% { clip-path: inset(92% 0 1% 0); transform: translate(-2px, 2px); }
            80% { clip-path: inset(43% 0 1% 0); transform: translate(2px, -2px); }
            100% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 2px); }
        }

        @keyframes glitch-skew {
            0% { transform: skew(0deg); }
            20% { transform: skew(-2deg); }
            40% { transform: skew(1deg); }
            60% { transform: skew(-1deg); }
            80% { transform: skew(2deg); }
            100% { transform: skew(0deg); }
        }

        /* 悬浮效果 */
        .float {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        /* 全息投影效果 */
        .hologram {
            position: relative;
            background: linear-gradient(45deg, #00ffff, #ff00ff);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));
            animation: hologram-flicker 3s infinite;
        }

        @keyframes hologram-flicker {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
            75% { opacity: 0.9; }
        }

        /* 光束效果 */
        .beam {
            position: absolute;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent, rgba(0, 255, 255, 0.8), transparent);
            animation: beam-move 3s linear infinite;
        }

        @keyframes beam-move {
            0% { transform: translateX(-100vw); }
            100% { transform: translateX(100vw); }
        }

        /* 渐变文字 */
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #00ffff 75%, #667eea 100%);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient-shift 10s ease infinite;
        }

        @keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 粒子容器 */
        #particles-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }

        /* 3D容器 */
        #three-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3;
            pointer-events: none;
        }

        /* 按钮悬停效果 */
        .cyber-button {
            position: relative;
            overflow: hidden;
            transition: all 0.3s;
        }

        .cyber-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .cyber-button:hover::before {
            left: 100%;
        }

        .cyber-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
        }

        /* 卡片悬停效果 */
        .tech-card {
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .tech-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tech-card:hover::before {
            opacity: 1;
        }

        .tech-card:hover {
            transform: translateY(-10px) scale(1.02);
            border-color: rgba(0, 255, 255, 0.5);
        }

        /* 导航栏玻璃态 */
        .nav-glass {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.5);
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #00ffff, #ff00ff);
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <!-- 背景层 -->
    <div class="grid-bg"></div>
    <canvas id="particles-canvas"></canvas>
    <div id="three-container"></div>
    <div class="scanline"></div>
    <div class="beam"></div>

    <!-- 导航栏 -->
    <nav class="nav-glass fixed top-0 w-full z-50 px-6 py-4">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 bg-gradient-to-br from-cyan-400 to-purple-600 rounded-lg flex items-center justify-center">
                    <i data-lucide="cpu" class="w-6 h-6"></i>
                </div>
                <span class="text-2xl font-bold hologram">QUANTUM</span>
            </div>
            <div class="hidden md:flex items-center space-x-8">
                <a href="#home" class="hover:text-cyan-400 transition-colors">首页</a>
                <a href="#products" class="hover:text-cyan-400 transition-colors">产品</a>
                <a href="#tech" class="hover:text-cyan-400 transition-colors">技术</a>
                <a href="#about" class="hover:text-cyan-400 transition-colors">关于</a>
                <button class="cyber-button glass px-6 py-2 rounded-full text-sm font-medium">
                    开始体验
                </button>
            </div>
            <button class="md:hidden" onclick="toggleMenu()">
                <i data-lucide="menu" class="w-6 h-6"></i>
            </button>
        </div>
    </nav>

    <!-- 主页英雄区 -->
    <section id="home" class="relative min-h-screen flex items-center justify-center z-10">
        <div class="max-w-7xl mx-auto px-6 text-center">
            <h1 class="text-6xl md:text-8xl font-black mb-6 glitch" data-text="QUANTUM">
                QUANTUM
            </h1>
            <p class="text-xl md:text-2xl text-gray-300 mb-8 breathe">
                探索量子计算的无限可能
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <button class="cyber-button glass px-8 py-4 rounded-full text-lg font-medium hover:scale-105 transition-transform">
                    <span class="flex items-center justify-center gap-2">
                        <i data-lucide="rocket" class="w-5 h-5"></i>
                        开启未来
                    </span>
                </button>
                <button class="glass px-8 py-4 rounded-full text-lg font-medium hover:bg-white/10 transition-colors">
                    了解更多
                </button>
            </div>
        </div>

        <!-- 悬浮元素 -->
        <div class="absolute top-20 left-10 float">
            <div class="w-20 h-20 glass rounded-full flex items-center justify-center pulse">
                <i data-lucide="zap" class="w-10 h-10 text-cyan-400"></i>
            </div>
        </div>
        <div class="absolute bottom-20 right-10 float" style="animation-delay: 2s;">
            <div class="w-16 h-16 glass rounded-lg flex items-center justify-center pulse">
                <i data-lucide="layers" class="w-8 h-8 text-purple-400"></i>
            </div>
        </div>
    </section>

    <!-- 产品展示 -->
    <section id="products" class="relative py-20 z-10">
        <div class="max-w-7xl mx-auto px-6">
            <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 gradient-text">
                量子产品矩阵
            </h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="tech-card glass p-8 rounded-2xl">
                    <div class="w-16 h-16 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-xl flex items-center justify-center mb-6">
                        <i data-lucide="brain" class="w-8 h-8"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 hologram">量子AI</h3>
                    <p class="text-gray-400 mb-6">
                        融合量子计算与人工智能，突破传统算力极限，实现指数级性能提升。
                    </p>
                    <div class="flex items-center text-cyan-400 hover:text-cyan-300 cursor-pointer">
                        <span>探索更多</span>
                        <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
                    </div>
                </div>

                <div class="tech-card glass p-8 rounded-2xl">
                    <div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-pink-600 rounded-xl flex items-center justify-center mb-6">
                        <i data-lucide="shield" class="w-8 h-8"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 hologram">量子加密</h3>
                    <p class="text-gray-400 mb-6">
                        基于量子纠缠原理的加密技术，提供绝对安全的数据保护方案。
                    </p>
                    <div class="flex items-center text-cyan-400 hover:text-cyan-300 cursor-pointer">
                        <span>探索更多</span>
                        <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
                    </div>
                </div>

                <div class="tech-card glass p-8 rounded-2xl">
                    <div class="w-16 h-16 bg-gradient-to-br from-green-400 to-teal-600 rounded-xl flex items-center justify-center mb-6">
                        <i data-lucide="network" class="w-8 h-8"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 hologram">量子网络</h3>
                    <p class="text-gray-400 mb-6">
                        构建全球量子通信网络，实现瞬时信息传输，开启通信新纪元。
                    </p>
                    <div class="flex items-center text-cyan-400 hover:text-cyan-300 cursor-pointer">
                        <span>探索更多</span>
                        <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技术展示 -->
    <section id="tech" class="relative py-20 z-10">
        <div class="max-w-7xl mx-auto px-6">
            <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 gradient-text">
                核心技术
            </h2>
            <div class="glass-dark rounded-3xl p-12">
                <div class="grid md:grid-cols-2 gap-12 items-center">
                    <div>
                        <h3 class="text-3xl font-bold mb-6 hologram">超导量子处理器</h3>
                        <p class="text-gray-300 mb-6">
                            采用最新超导材料，在接近绝对零度的环境下运行，实现量子比特的稳定控制。
                            我们的处理器拥有1000+量子比特，错误率低于0.001%。
                        </p>
                        <div class="space-y-4">
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 glass rounded-lg flex items-center justify-center">
                                    <i data-lucide="check-circle" class="w-6 h-6 text-green-400"></i>
                                </div>
                                <span>1000+ 量子比特</span>
                            </div>
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 glass rounded-lg flex items-center justify-center">
                                    <i data-lucide="check-circle" class="w-6 h-6 text-green-400"></i>
                                </div>
                                <span>99.999% 保真度</span>
                            </div>
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 glass rounded-lg flex items-center justify-center">
                                    <i data-lucide="check-circle" class="w-6 h-6 text-green-400"></i>
                                </div>
                                <span>毫秒级量子门操作</span>
                            </div>
                        </div>
                    </div>
                    <div class="relative">
                        <div class="w-full h-64 glass rounded-2xl flex items-center justify-center">
                            <div class="text-center">
                                <div class="w-32 h-32 mx-auto mb-4 relative">
                                    <div class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-purple-600 rounded-full animate-pulse"></div>
                                    <div class="absolute inset-2 bg-black rounded-full flex items-center justify-center">
                                        <span class="text-2xl font-bold hologram">Q1000</span>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-400">量子处理器可视化</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 数据展示 -->
    <section class="relative py-20 z-10">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-8">
                <div class="text-center">
                    <div class="text-5xl font-bold hologram mb-2" data-count="1000">0</div>
                    <p class="text-gray-400">量子比特</p>
                </div>
                <div class="text-center">
                    <div class="text-5xl font-bold hologram mb-2" data-count="99.9">0</div>
                    <p class="text-gray-400">准确率 %</p>
                </div>
                <div class="text-center">
                    <div class="text-5xl font-bold hologram mb-2" data-count="500">0</div>
                    <p class="text-gray-400">合作伙伴</p>
                </div>
                <div class="text-center">
                    <div class="text-5xl font-bold hologram mb-2" data-count="24">0</div>
                    <p class="text-gray-400">全球节点</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="relative py-12 z-10 border-t border-white/10">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center space-x-2 mb-4 md:mb-0">
                    <div class="w-8 h-8 bg-gradient-to-br from-cyan-400 to-purple-600 rounded-lg flex items-center justify-center">
                        <i data-lucide="cpu" class="w-5 h-5"></i>
                    </div>
                    <span class="text-xl font-bold hologram">QUANTUM</span>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="hover:text-cyan-400 transition-colors">
                        <i data-lucide="twitter" class="w-5 h-5"></i>
                    </a>
                    <a href="#" class="hover:text-cyan-400 transition-colors">
                        <i data-lucide="github" class="w-5 h-5"></i>
                    </a>
                    <a href="#" class="hover:text-cyan-400 transition-colors">
                        <i data-lucide="linkedin" class="w-5 h-5"></i>
                    </a>
                    <a href="#" class="hover:text-cyan-400 transition-colors">
                        <i data-lucide="mail" class="w-5 h-5"></i>
                    </a>
                </div>
            </div>
            <div class="text-center mt-8 text-gray-500 text-sm">
                © 2024 QUANTUM. All rights reserved. | 量子未来，触手可及
            </div>
        </div>
    </footer>

    <script>
        // 初始化Lucide图标
        lucide.createIcons();

        // 粒子系统
        const canvas = document.getElementById('particles-canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const particles = [];
        const particleCount = 100;

        class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.size = Math.random() * 2 + 0.5;
                this.speedX = Math.random() * 2 - 1;
                this.speedY = Math.random() * 2 - 1;
                this.opacity = Math.random() * 0.5 + 0.2;
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;

                if (this.x > canvas.width) this.x = 0;
                if (this.x < 0) this.x = canvas.width;
                if (this.y > canvas.height) this.y = 0;
                if (this.y < 0) this.y = canvas.height;
            }

            draw() {
                ctx.fillStyle = `rgba(0, 255, 255, ${this.opacity})`;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        for (let i = 0; i < particleCount; i++) {
            particles.push(new Particle());
        }

        function animateParticles() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            particles.forEach(particle => {
                particle.update();
                particle.draw();
            });

            // 连接临近粒子
            particles.forEach((p1, index) => {
                particles.slice(index + 1).forEach(p2 => {
                    const distance = Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
                    if (distance < 100) {
                        ctx.strokeStyle = `rgba(0, 255, 255, ${0.1 * (1 - distance / 100)})`;
                        ctx.lineWidth = 0.5;
                        ctx.beginPath();
                        ctx.moveTo(p1.x, p1.y);
                        ctx.lineTo(p2.x, p2.y);
                        ctx.stroke();
                    }
                });
            });

            requestAnimationFrame(animateParticles);
        }

        animateParticles();

        // Three.js 3D场景
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ alpha: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('three-container').appendChild(renderer.domElement);

        // 创建旋转的立方体
        const geometry = new THREE.BoxGeometry(2, 2, 2);
        const material = new THREE.MeshBasicMaterial({
            color: 0x00ffff,
            wireframe: true,
            transparent: true,
            opacity: 0.1
        });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 添加更多几何体
        const torusGeometry = new THREE.TorusGeometry(3, 0.5, 16, 100);
        const torusMaterial = new THREE.MeshBasicMaterial({
            color: 0xff00ff,
            wireframe: true,
            transparent: true,
            opacity: 0.05
        });
        const torus = new THREE.Mesh(torusGeometry, torusMaterial);
        scene.add(torus);

        camera.position.z = 10;

        function animate3D() {
            requestAnimationFrame(animate3D);

            cube.rotation.x += 0.005;
            cube.rotation.y += 0.005;

            torus.rotation.x += 0.003;
            torus.rotation.y += 0.003;

            renderer.render(scene, camera);
        }

        animate3D();

        // 窗口大小调整
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // 数字动画
        const counters = document.querySelectorAll('[data-count]');
        const speed = 200;

        const animateCounters = () => {
            counters.forEach(counter => {
                const target = parseFloat(counter.getAttribute('data-count'));
                const increment = target / speed;
                let current = 0;

                const updateCounter = () => {
                    current += increment;
                    if (current < target) {
                        counter.textContent = current.toFixed(1);
                        requestAnimationFrame(updateCounter);
                    } else {
                        counter.textContent = target % 1 === 0 ? target : target.toFixed(1);
                    }
                };

                updateCounter();
            });
        };

        // 滚动触发动画
        const observerOptions = {
            threshold: 0.5
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    animateCounters();
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        counters.forEach(counter => {
            observer.observe(counter.parentElement);
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // 菜单切换
        function toggleMenu() {
            // 这里可以添加移动端菜单逻辑
            console.log('Toggle menu');
        }

        // 鼠标跟随效果
        document.addEventListener('mousemove', (e) => {
            const x = e.clientX / window.innerWidth;
            const y = e.clientY / window.innerHeight;

            if (cube) {
                cube.position.x = (x - 0.5) * 2;
                cube.position.y = -(y - 0.5) * 2;
            }
        });
    </script>
</body>
</html>
